<template>
  <div>
    <!-- 顶部：功能菜单 -->

    <div class="top-menu">
      <el-avatar shape="square" :size="35" src="" style="margin: 0 10px 0 10px" />
      <el-button
        v-for="(item, index) in menuItems"
        :key="index"
        class="menu-item"
        :icon="item.icon"
        text
        circle
        size="small"
        @click="handleMenuClick(item)"
      />
    </div>

    <!-- 主体内容区域 -->
    <el-container>
      <!-- 左侧：联系人列表 -->
      <el-aside width="20%" class="contact-list">
        <el-input placeholder="搜索" prefix-icon="el-icon-search" class="search-box" />
        <div class="contacts">
          <div
            v-for="contact in contacts"
            :key="contact.id"
            class="contact-item"
            :class="{ active: contact === selectedContact }"
            @click="selectContact(contact)"
          >
            <img :src="contact.avatar" alt="头像" class="avatar" />
            <div class="contact-info">
              <div class="name">{{ contact.name }}</div>
              <div class="last-message">{{ contact.lastMessage }}</div>
            </div>
            <div class="timestamp">{{ contact.timestamp }}</div>
          </div>
        </div>
      </el-aside>

      <!-- 右侧：聊天窗口 -->
      <el-main class="chat-window">
        <div class="chat-header">
          <span>{{ selectedContact?.name || "请选择联系人" }}</span>
        </div>
        <div ref="messageListRef" class="message-content-all">
          <div class="message-list">
            <div
              v-for="(msg, index) in messages"
              :key="index"
              class="message-item"
              :class="{ 'from-me': msg.fromMe }"
            >
              <!-- 对方的消息 -->
              <template v-if="!msg.fromMe">
                <el-avatar shape="square" :size="35" src="" style="margin: 0 10px 0 10px" />
                <div class="message-content">
                  <div class="sender-name">名字</div>
                  <div class="bubble">{{ msg.text }}</div>
                </div>
              </template>

              <!-- 我的消息 -->
              <template v-else>
                <div class="message-content">
                  <div class="bubble">{{ msg.text }}</div>
                </div>
                <el-avatar shape="square" :size="35" src="" style="margin: 0 10px 0 10px" />
              </template>
            </div>
          </div>
        </div>
        <div class="chat-footer">
          <div class="input-with-button">
            <el-input
              v-model="newMessage"
              type="textarea"
              :rows="4"
              placeholder="输入消息..."
              @keyup.enter="sendMessage"
            />
            <el-button
              class="send-btn"
              :class="{ 'fade-out': !newMessage.trim() }"
              @click="sendMessage"
            >
              发送
            </el-button>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";

interface Contact {
  id: number;
  name: string;
  avatar: string;
  lastMessage: string;
  timestamp: string;
}

export default defineComponent({
  setup() {
    const menuItems = [
      { icon: "chat-dot-round", action: "chat" },
      { icon: "user", action: "profile" },
      { icon: "document", action: "news" },
      { icon: "setting", action: "settings" },
    ];

    const contacts = ref<Contact[]>([
      {
        id: 1,
        name: "张三",
        avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        lastMessage: "你好，在吗？",
        timestamp: "昨天",
      },
      {
        id: 2,
        name: "李四",
        avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        lastMessage: "[图片]",
        timestamp: "今天",
      },
      {
        id: 3,
        name: "王五",
        avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        lastMessage: "明天见",
        timestamp: "前天",
      },
    ]);

    const selectedContact = ref<Contact | null>(null);
    const newMessage = ref("");
    const activeName = ref("");
    const messages = ref<{ text: string; fromMe: boolean }[]>([]);
    const messageListRef = ref<HTMLElement | null>(null);

    const handleMenuClick = (item: any) => {
      console.log("点击了菜单项:", item.action);
    };

    const selectContact = (contact: Contact) => {
      selectedContact.value = contact;
      messages.value = [];
      setTimeout(() => {
        messages.value.push({ text: "这是对方发来的消息", fromMe: false });
      }, 500);
    };

    const sendMessage = () => {
      if (!newMessage.value.trim()) return;

      messages.value.push({ text: newMessage.value, fromMe: true });
      newMessage.value = "";
      scrollToBottom();

      // 模拟回复
      setTimeout(() => {
        messages.value.push({ text: "这是自动回复", fromMe: false });
        scrollToBottom();
      }, 1000);
    };

    const scrollToBottom = () => {
      setTimeout(() => {
        if (messageListRef.value) {
          messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
        }
      });
    };

    onMounted(() => {
      selectContact(contacts.value[0]);
    });

    return {
      menuItems,
      contacts,
      selectedContact,
      newMessage,
      messages,
      messageListRef,
      handleMenuClick,
      selectContact,
      sendMessage,
      activeName,
    };
  },
});
</script>

<style scoped>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.top-menu {
  margin: 10px 10px 0 10px;
  height: 50px;
  background-color: #2d3748;
  display: flex;
  border-bottom: 1px solid #dcdcdc;
  align-items: center; /* 垂直居中 */
  border-radius: 3px;
}

.menu-item {
  font-size: 24px;
  cursor: pointer;
  padding: 15px;
}

.menu-item:hover {
  color: #409eff;
}

.contact-list {
  background-color: #fff;
  border-right: 1px solid #ebebeb;
  padding: 10px;
  overflow-y: auto;
}

.search-box {
  margin-bottom: 10px;
}

.contacts {
  height: calc(100vh - 210px);
  overflow-y: auto;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}

.contact-item:hover,
.contact-item.active {
  background-color: #eef2f7;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.contact-info {
  flex: 1;
}

.name {
  font-size: 14px;
  font-weight: 500;
}

.last-message {
  font-size: 12px;
  color: #888;
}

.timestamp {
  font-size: 12px;
  color: #888;
}

.chat-window {
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 10px;
  border-bottom: 1px solid #ebebeb;
  font-weight: bold;
}
.message-content-all {
  height: calc(100vh - 355px);
  overflow-y: auto;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 8px;
  margin-top: 10px;
  /* 可选：添加滚动条样式（美化滚动条） */
  scrollbar-width: thin;
  scrollbar-color: #aaa #f1f1f1;
}
.message-list {
  flex: 1; /* 如果使用了 flex 布局 */
}

.message-item {
  display: flex;
  align-items: start;
  margin-bottom: 15px;
}

.message-item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 4px;
}

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.sender-name {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.bubble {
  padding: 10px 15px;
  border-radius: 18px;
  word-break: break-word;
  line-height: 1.4;
  min-height: 24px;
  box-sizing: border-box;
  position: relative;
}

.message-item:not(.from-me) .bubble {
  background-color: #e5e5ea;
  border-top-left-radius: 8px;
}

.message-item.from-me {
  justify-content: flex-end;
  text-align: right;
}

.message-item.from-me .message-content {
  text-align: right;
}

.message-item.from-me .bubble {
  background-color: #d9ebff;
  border-top-right-radius: 8px;
}

.chat-footer {
  display: flex;
  gap: 10px;
  padding: 10px 0 0 0;
}
.input-with-button {
  position: relative;
  display: block;
  width: 100%;
}

:deep(.input-with-button .el-textarea .el-textarea__inner) {
  padding-right: 90px;
  border-radius: 8px; /* 输入框也加圆角，统一风格 */
  transition: all 0.2s ease;
}

.send-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;

  background: linear-gradient(135deg, #4e7ce5, #3b6ecc);
  border: none;
  color: white;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.send-btn:hover {
  background: linear-gradient(135deg, #5a8af1, #457be6);
  transform: scale(1.03);
}

.send-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
</style>
